<script lang="ts" setup>
import {onMounted, reactive, type UnwrapRef} from 'vue';
import {useRoute} from "vue-router";
import {getEmployerDetailByEmployerIdAPI} from "@/apis/employer.ts";

//表单数据
interface FormState {
  employerId: string;
  employerIsVerified: string,
  employerStatus: string,
  employerCompanyName: string,
  userAvatarUrl: string,
  employerCompanyIndustry: string,
  employerCompanyAddress: string,
  employerCompanyDescription: string,
  employerCompanyWebsite: string
}

const formState: UnwrapRef<FormState> = reactive({
  employerId: '',
  employerIsVerified: '',
  employerStatus: '',
  employerCompanyName: '',
  userAvatarUrl: '',
  employerCompanyIndustry: '',
  employerCompanyAddress: '',
  employerCompanyDescription: '',
  employerCompanyWebsite: ''
});


//接收参数
const route = useRoute();
//生命周期
onMounted(() => {
  formState.employerId = route.params.employerId as string;
  getEmployerInfo()
})
//获取岗位信息
const getEmployerInfo = async () => {
  if (formState.employerId) {
    const res = await getEmployerDetailByEmployerIdAPI(formState.employerId)
    if (res.data.flag) {
      formState.employerCompanyName = res.data.data.employerCompanyName
      formState.userAvatarUrl = res.data.data.userAvatarUrl
      formState.employerCompanyIndustry = res.data.data.employerCompanyIndustry
      formState.employerCompanyAddress = res.data.data.employerCompanyAddress
      formState.employerCompanyDescription = res.data.data.employerCompanyDescription
      formState.employerCompanyWebsite = res.data.data.employerCompanyWebsite
      formState.employerIsVerified = res.data.data.employerIsVerified
      formState.employerStatus = res.data.data.employerStatus
    }
  }
}
//计算颜色
const Color = (colorType: string) => {
  switch (colorType) {
    case '已认证':
      return 'green';
    case '未认证':
      return 'red';
  }
}

</script>
<template>
  <div class="jobAndEmployerDetail">
    <div class="top">
      <a-page-header
          sub-title="收藏列表"
          title="返回"
          @back="() => $router.go(-1)"
      />
    </div>
    <div class="bottom">
      <a-divider orientation="left" style="color:#4D7181; font-size: 20px;">公司信息</a-divider>
      <a-badge-ribbon  :color="Color(formState.employerIsVerified)" :text="formState.employerIsVerified">
        <div style="display: flex;padding-top: 30px">
          <div>
            <a-descriptions :title="formState.employerCompanyName">
              <a-descriptions-item label="公司行业">{{ formState.employerCompanyIndustry }}</a-descriptions-item>
              <a-descriptions-item :span="2" label="公司官网">
                {{ formState.employerCompanyWebsite }}
              </a-descriptions-item>
              <a-descriptions-item :span="3" label="公司简介">
                {{ formState.employerCompanyDescription }}
              </a-descriptions-item>

              <a-descriptions-item :span="3" label="公司地址">
                {{ formState.employerCompanyAddress }}
              </a-descriptions-item>
            </a-descriptions>
          </div>
          <div>
            <a-avatar
                :size="150"
                :src="'http://localhost:8080/image/download?name=' + formState.userAvatarUrl"
            />
          </div>
        </div>

      </a-badge-ribbon>
    </div>

  </div>
</template>

<style scoped>
.jobAndEmployerDetail {
  padding: 10px;
  height: 750px;
  width: 70%;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  margin: 10px;

  .top {
    border-bottom: 1px solid #ccc;
    border-radius: 10px;
  }

  .bottom {
    padding: 10px 50px 50px;
  }
}


</style>
